<template>
  <div class="w">
    <!-- 标题 -->
    <div class="title-area">
      <span>
        厂商信息{{ this.record ? '修改' : '新增' }}
      </span>
    </div>

    <!-- 表单区 -->
    <Form style="margin-top: 35px;" 
      name="form" 
      ref="formRef" 
      :labelCol="labelCol" 
      :wrapperCol="wrapperCol" 
      :initialValues="{}"
      @finish="formFinish">

      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="firmName" label="厂商名称" :rules="formRules.firmName">
            <Input placeholder="请输入厂商名称" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="address" label="厂商地址" :rules="formRules.address">
            <Input placeholder="请输入厂商地址" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="remark" label="厂商简介">
            <TextArea placeholder="请输入厂商简介" style="width: 100%; height: 100px;" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="isInCatalog" label="是否在信创目录内" initialValue="否">
            <RadioGroup :options="['是', '否']" name="isInCatalog" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="linkMan" label="厂商联系人" :rules="formRules.linkMan">
            <Input placeholder="请输入厂商联系人" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="linkPhone" label="联系人电话" :rules="formRules.linkPhone">
            <Input placeholder="请输入联系人电话" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="input1" label="输入框（选填）">
            <Input placeholder="提示文字35%" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="input2" label="输入框最多8个字">
            <Input placeholder="提示文字35%" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row style="margin-top: 50px;">
        <Col :span="12" :offset="6">
          <FormItem :wrapperCol="{ span: 24 }" style="text-align: center">
            <Button style="width: 100px;" type="primary" @click="formValidate">提 交</Button>
            <Button style="width: 100px; margin-left: 20px;" @click="formCancel">取 消</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>

    <!-- 提交确认框 -->
    <Modal title="提交确认"
      v-model="isModalVisible"
      @ok="formSubmit"
      @cancel="isModalVisible = false"
      centered>
      <p>即将新增新的厂商信息，是否确认？</p>
    </Modal>
    
  </div>
</template>

<script>
import * as ruoyi from '@/utils/ruoyi'
import { Message } from '@uni/vue';
import { addFirm, getFirm } from "@/api/doapp/firm";

export default {
    name: "app",
    data() {
      return {
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      isInCatalog: '否',
      record: {},
      form: {},
      formRules: {
        firmName: [
          { required: true, message: '请输入厂商名称' },
        ],
        address: [
          { required: true, message: '请输入厂商地址' },
        ],
        linkMan: [
          { required: true, message: '请输入厂商联系人' },
        ],
        linkPhone: [
          { required: true, message: '请输入联系人电话' },
        ]
      },
      isModalVisible: false
    }
  },
  mounted: async function () {
    this.record = this.$route.query.record;
    if (this.record) this.queryFormInfo();
  },
  methods: {
    queryFormInfo: async function () {
      let rs = await getFirm(this.record.firmId);
      if (rs.code !== 200) {
        Message.error({ text: '获取厂商失败：' + rs.msg });
        this.$router.push('/manufacturerInfoMgr');
        return;
      }
      this.form = rs.data;
      console.log("this.form: ", this.form);
    },
    formValidate: function () {
      this.$refs.formRef.submit();
    },
    formCancel: function () {
      // this.$refs.formRef.reset();
      this.$router.push('/manufacturerInfoMgr');
    },
    formFinish: function (formValues) {
      this.form = formValues;
      this.isModalVisible = true;
    },
    formSubmit: async function () {
      // 公共属性
      this.form.createBy = this.$store.state.user.name;
      this.form.createTime = ruoyi.parseTime(Date.now());
      this.form.updateBy = '';
      this.form.updateTime = '';

      // 业务属性
      this.form.isInCatalog = this.form.isInCatalog === '是' ? true : false;

      // 提交表单请求
      this.isModalVisible = false;
      const rs = await addFirm(this.form);
      if (rs.code !== 200) return Message.error({ text: '新增厂商失败：' + rs.msg });

      Message.success({ text: '新增厂商信息完成' });
      this.$router.push('/manufacturerInfoMgr');
    }
  }
}
</script>

<style scoped>
  .w {
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }
</style>
